{{ define "content" }}
<div class="page-title">
    <div class="title_left">
        <h3>{{ i18n "Device %s" $ nil nil nil .name }}</h3>
    </div>

    <div class="title_right">
        <div class="form-group pull-right">
            <div class="input-group">
                <label class="btn-group">
                    {{ if .Bind.Meta.Status.IsStatusOnline }}
                    <button type="button" class="btn btn-icon btn-warning btn-sm"
                            data-toggle="modal" data-target="#modal"
                            data-modal-title="{{ i18n "Confirm restart device" . }}"
                            data-modal-body="{{ i18n "Will be restart device. Are you sure?" . }}"
                            data-modal-callback="action('restart');">
                        <i class="fas fa-power-off" title="{{ i18n "Restart" . }}"></i>
                    </button>
                    {{ end }}
                    <button type="button" class="btn btn-icon btn-danger btn-sm"
                            data-toggle="modal" data-target="#modal"
                            data-modal-title="{{ i18n "Confirm reset device" . }}"
                            data-modal-body="{{ i18n "Will be wipe config device. Are you sure?" . }}"
                            data-modal-callback="action('reset');">
                        <i class="fas fa-eraser" title="{{ i18n "Wipe" . }}"></i>
                    </button>
                </label>
            </div>
        </div>
    </div>
</div>

<div class="clearfix"></div>

<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>{{ i18n "Device attributes" . }}</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <p class="text-muted font-13 m-b-30">
                    {{ if .last_update_delta }}
                        {{ raw (i18n "Last online time %s (%s)" . nil nil nil (print "<script type=\"application/javascript\">document.write(dateToString('" (.last_update.Format "2006-01-02T15:04:05-07:00") "'))</script>") .last_update_delta ) }}
                    {{ else }}
                        {{ raw ( i18n "Last online time %s" . nil nil nil (print "<script type=\"application/javascript\">document.write(dateToString('" (.last_update.Format "2006-01-02T15:04:05-07:00") "'))</script>") ) }}
                    {{ end }}
                </p>

                <table class="table table-striped datatable dt-responsive nowrap" style="width:100%">
                    <thead>
                    <tr>
                        <th class="md-col-2">{{ i18n "Attribute" . }}</th>
                        <th>{{ i18n "Value" . }}</th>
                    </tr>
                    </thead>
                    <tbody>
                        {{ range $name, $value := .devices_attributes }}
                        <tr>
                            <td>{{ $name }}</td>
                            <td>
                                {{ if eq $name "implementation.config" }}
                                    <pre style="padding:0"><code class="json"><script type="application/javascript">document.write(JSON.stringify(JSON.parse({{ raw $value }}), null, 2))</script></code></pre>
                                {{ else }}
                                    {{ $value }}
                                {{ end }}
                            </td>
                        </tr>
                        {{ end }}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{ if .nodes }}
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>{{ i18n "Nodes" . }}</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <table class="table table-striped datatable dt-responsive nowrap" style="width:100%">
                    <thead>
                        <tr>
                            <th>{{ i18n "ID" . }}</th>
                            {{ if eq $.protocol_major "3" }}<th>{{ i18n "Name" . }}</th>{{ end }}
                            <th>{{ i18n "Type" . }}</th>
                            <th>{{ i18n "Array" . }}</th>
                            <th style="display: none"></th>
                        </tr>
                    </thead>
                    <tbody>
                    {{ range $n, $node := .nodes }}
                        <tr>
                            <td>{{ $node.ID.String }}</td>
                            {{ if eq $.protocol_major "3" }}<td>{{ $node.Name.String }}</td>{{ end }}
                            <td>{{ $node.Type.String }}</td>
                            <td>{{ $node.Array.String }}</td>
                            <td>
                                {{ $properties := $node.Properties }}
                                {{ if $properties }}
                                <table class="table table-striped nowrap">
                                    <thead>
                                        <tr>
                                            <th>{{ i18n "Property" $ }}</th>
                                            <th>{{ i18n "Value" $ }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{ range $p, $property := $properties }}
                                        <tr>
                                            <td>{{ $property.Name.String }}</td>
                                            <td>{{ $property.Value.String }} {{ $property.Unit.String }}</td>
                                        </tr>
                                        {{ end }}
                                    </tbody>
                                </table>
                                {{ end }}
                            </td>
                        </tr>
                    {{ end }}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{{ end }}

{{ if .settings }}
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel collapsed">
            <div class="x_title">
                <h2>{{ i18n "Config" . }}</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <form role="form" action="?action=settings" method="post" id="settings" data-toggle="validator">
                    <table class="table table-striped datatable dt-responsive nowrap" style="width:100%">
                        <thead>
                        <tr>
                            <th class="md-col-1">{{ i18n "Option" . }}</th>
                            <th>{{ i18n "Value" . }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {{ range $i, $option := .settings }}
                        <tr>
                            <td>{{ $option.Name }}</td>
                            <td>
                            {{ if eq $option.Type "bool" }}
                                <input type="checkbox" class="js-switch" name="{{ $option.Name }}" id="{{ $option.Name }}" {{ if eq (print $option.Value) "true" }} checked{{ end }} />
                            {{ else if or (eq $option.Type "int") (eq $option.Type "int64") }}
                                <input type="number" class="form-control" name="{{ $option.Name }}" value="{{ $option.Value }}" id="{{ $option.Name }}" pattern="^[-+]?[0-9]*$"/>
                            {{ else if or (eq $option.Type "uint") (eq $option.Type "uint64") }}
                                <input type="number" class="form-control" name="{{ $option.Name }}" value="{{ $option.Value }}" id="{{ $option.Name }}" pattern="^[+]?[0-9]*$"/>
                            {{ else if eq $option.Type "float64" }}
                                <input type="number" class="form-control" name="{{ $option.Name }}" value="{{ $option.Value }}" id="{{ $option.Name }}" pattern="^[-+]?[0-9]*(\.[0-9]*)?$"/>
                            {{ else if and (eq $option.Type "string") (ge (len $option.Value) 100) }}
                                <textarea class="form-control resizable_textarea" rows="4" name="{{ $option.Name }}" id="{{ $option.Name }}">{{ $option.Value }}</textarea>
                            {{ else }}
                                <input type="text" class="form-control" name="{{ $option.Name }}" value="{{ $option.Value }}" id="{{ $option.Name }}"/>
                            {{ end }}
                            </td>
                        </tr>
                        {{ end }}
                        </tbody>
                    </table>
                </form>
            </div>
        </div>
    </div>
</div>
{{ end }}

{{ if .ota_enabled }}
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel collapsed">
            <div class="x_title">
                <h2>{{ i18n "OTA" . }}</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <table class="table table-striped nowrap" style="width:100%">
                    <tbody>
                        <tr>
                            <th>{{ i18n "Status" . }}</th>
                            <td>{{ if .ota_running }}{{ i18n "running" . }}{{ else }}{{ i18n "ready" . }}{{ end }}</td>
                        </tr>
                        <tr>
                            <th>{{ i18n "Progress" . }}</th>
                            <td>
                                <div class="progress" style="margin-bottom:0">
                                    <div class="progress-bar progress-bar-striped {{ if .ota_running }}progress-bar-info active{{ else }}progress-bar-danger{{ end}}" role="progressbar" aria-valuenow="{{ .ota_written }}" aria-valuemin="0" aria-valuemax="{{ .ota_total }}" style="width:{{ .ota_progress }}%">
                                        <span style="line-height:20px">
                                            {{ i18n "%d bytes of %d" . nil nil nil .ota_written .ota_total }}
                                        </span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>{{ i18n "Checksum" . }}</th>
                            <td>{{ .ota_checksum }}</td>
                        </tr>
                    </tbody>
                </table>

                {{ if eq .ota_running false }}
                <form class="form-horizontal form-label-left dropzone" role="form" method="post" id="ota" action="?action=ota" novalidate>
                    <div class="item form-group">
                        <label for="level" class="control-label col-md-3 col-sm-3 col-xs-12">
                        {{ i18n "Timeout" . }}
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" class="form-control" id="timeout" name="timeout" value="{{ .ota_timeout }}" required="required">
                        </div>
                    </div>
                </form>
                {{ end }}
            </div>
        </div>
    </div>
</div>
{{ end }}

<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel collapsed">
            <div class="x_title">
                <h2>{{ i18n "Broadcast message" . }}</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <form class="form-horizontal form-label-left" role="form" method="post" id="broadcast" action="?action=broadcast" novalidate>
                    <div class="item form-group">
                        <label for="level" class="control-label col-md-3 col-sm-3 col-xs-12">
                            {{ i18n "Level" . }} <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" class="form-control" id="level" name="level" placeholder="alert" value="" required="required">
                        </div>
                    </div>
                    <div class="item form-group">
                        <label for="message" class="control-label col-md-3 col-sm-3 col-xs-12">
                            {{ i18n "Message" . }}
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <textarea class="form-control resizable_textarea" rows="4" name="message" id="message"></textarea>
                        </div>
                    </div>
                    <div class="ln_solid"></div>
                    <div class="form-group">
                        <div class="col-md-6 col-md-offset-3">
                            <button type="submit" class="btn btn-success">{{ i18n "Send" . }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{{ end }}

{{ define "head" }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/highlightjs/css/tomorrow.min.css" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/dropzonejs/css/dropzone.min.css" false) }}

    <style type="text/css">
        #settings tbody input, #settings tbody textarea {
            width: 100%;
        }
    </style>
{{ end }}

{{ define "js" }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net/js/jquery.dataTables.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-responsive/js/dataTables.responsive.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-responsive-bs/js/responsive.bootstrap.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/highlightjs/js/highlight.pack.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/validator/js/validator.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/dropzonejs/js/dropzone.min.js" false) }}
    <script type="application/javascript">
        $(document).ready(function () {
            Dropzone.options.ota = {
                parallelUploads: 1,
                paramName: "firmware",
                createImageThumbnails: false,
                acceptedFiles: "application/macbinary,.bin"
            };

            hljs.initHighlightingOnLoad();

            function successHandler(r) {
                if (r.result === 'failed') {
                    new PNotify({
                        title: 'Error',
                        text: r.message,
                        type: 'error',
                        hide: false,
                        styling: 'bootstrap3'
                    });
                } else if (r.message !== 'undefined') {
                    new PNotify({
                        title: 'Success',
                        text: r.message,
                        type: 'success',
                        hide: false,
                        styling: 'bootstrap3'
                    });
                }
            }

            window.action = function(cmd) {
                $.ajax({
                    type: 'POST',
                    url: '?action=' + cmd,
                    success: successHandler
                });
            };

            $('#broadcast').submit(function(event){
                event.preventDefault();
                var e = $(this);

                $.ajax({
                    type: 'POST',
                    url: e.prop('action'),
                    data: e.serialize(),
                    success: successHandler
                });
            });

            {{ if .settings }}
            $('#settings input[id], #settings textarea[id]').change(function() {
                var
                    e = $(this),
                    data = {},
                    k = e.prop('id')
                ;

                if (e.prop('type') === 'checkbox') {
                    data[k] = e.prop('checked') != '';
                } else {
                    data[k] = e.val()
                }

                $.ajax({
                    type: 'POST',
                    url: $('#settings').prop('action'),
                    data: data,
                    success: successHandler
                });
            });
            {{ end }}

            {{ if .error }}
                new PNotify({
                    title: 'Error',
                    text: '{{ .error }}',
                    type: 'error',
                    hide: false,
                    styling: 'bootstrap3'
                });
            {{ end }}
        });
    </script>
{{ end }}